import React, { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
// import styles from "./MapContainer.css";
export default function Gd() {
  let map = null;
  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "2e4eb91497b5cc4ccb22880fd287daf0",
    };
    AMapLoader.load({
      key: "8f7390618667d52e8736764f6cb59fc9", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale", "AMap.ToolBar"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [120.264370, 30.305488], // 初始化地图中心点位置
        });
        // 添加比例尺控件
        var scale = new AMap.Scale(); //创建工具条插件实例
        map.addControl(scale); //添加工具条插件到页面
        var toolBar = new AMap.ToolBar(); //创建缩放插件实例
        map.addControl(toolBar); //添加缩放插件到页面
        //创建一个 Marker 实例：
        const marker = new AMap.Marker({
          position: new AMap.LngLat(120.264370, 30.305488), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "九堡",

        });

        //将创建的点标记添加到已有的地图实例：
        map.add(marker);
        //标记点绑定事件
        marker.on('click', ()=>{
          alert('点击地图')
        });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);
  return (
    <div>
      <div id="container" className='map' style={{
        padding: 0,
        margin: 0, height: 450
      }}></div>
    </div>
  )
}
